/**
*@author ymhui
*@createTime 03 14:54
*@description
*/
<template>
  <div id="factor-alarm" v-loading="loading"
       element-loading-text="正在加载数据"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-card class="factor-card" body-style="{ padding: '0px' }">
      <div style="color: white; font-size: 15px; padding-bottom: .5em">指标超标报警</div>
      <ul class="seamless-ul">
        <li class="seamless-li">
          <span class="seamless-narrow-head">服务区</span>
          <span class="seamless-narrow-head">指标</span>
          <span class="seamless-wide-head">报警等级</span>
          <span class="seamless-wide-head">时间</span>
        </li>
      </ul>
      <vue-seamless :data="factorAlarms" :class-option="optionSingleHeightTime" class="warp" :style="wrapDivStyle">
        <ul class="item">
          <li v-for="item in factorAlarms" :key="item.area">
            <span class="seamless-narrow-item" v-text="item.area"></span>
            <span class="seamless-narrow-item" v-text="item.factor"></span>
            <span class="seamless-wide-item" v-text="item.level"></span>
            <span class="seamless-wide-item" v-text="item.time"></span>
          </li>
        </ul>
      </vue-seamless>
    </el-card>
  </div>
</template>

<script>
    import vueSeamless from 'vue-seamless-scroll'
    import {mapActions, mapGetters} from 'vuex';

    export default {
        name: "FactorAlarm",
        props: {
            isFullScreen: Boolean
        },
        components: {
            vueSeamless
        },
        data() {
            return {
                loading: false,
                timeTask: null,
                wrapDivStyle: "height: 11em;overflow: hidden;"
            };
        },
        computed: {
            ...mapGetters([
                'factorAlarms'
            ]),
            optionSingleHeightTime: function () {
                return {
                    singleHeight: 15,
                    waitTime: 2000
                }
            }
        },
        methods: {
            ...mapActions([
                'initFactorAlarmsAct'
            ]),
            initData() {
                this.loading = true;
                this.initFactorAlarmsAct().then(() => {
                    this.loading = false;
                }).catch(error => {
                    this.$message.error(error);
                    this.loading = false;
                })
            },
            chartTimeTask() {
                this.timeTask = setInterval(() => {
                    console.log('执行设备报警刷新任务');
                    this.initData();
                }, 1000 * 300)
            },
            wrapStyle() {
                if (this.isFullScreen) {
                    console.log(this.isFullScreen);
                    this.wrapDivStyle = "height: 15rem;overflow: hidden;";
                } else {
                    this.wrapDivStyle = "height: 11em;overflow: hidden;";
                }
            }
        },
        watch: {
            isFullScreen(oldValue, newValue) {
                if (oldValue !== newValue) {
                    this.wrapStyle();
                }
            }
        },
        mounted() {
            this.initData();
            this.chartTimeTask();
        },
        beforeDestroy() {
            clearInterval(this.timeTask);
        }
    }
</script>

<style lang="scss" scoped>
  .factor-card {
    background-color: transparent;
    box-shadow: inset 0px 0px 20px 20px rgba(254, 253, 255, 0.1);
    /* 顺序为: offset-x, offset-y, blur-size, spread-size, color */
    /* blur-size 和 spread-size 是可选的 (默认为 0) */
    border-color: #03a6ff
  }

  /*.warp {*/
  /*  height: 3.0rem;*/
  /*  overflow: hidden;*/
  /*}*/

  .warp ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
  }

  .warp li {
    height: 20px;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: white;
  }
</style>
